import { StyleSheet, Text, View } from 'react-native';

import FastImage from '@d11/react-native-fast-image';
import { FlashList } from '@shopify/flash-list';
import { Colors } from 'react-native/Libraries/NewAppScreen';

import { CustomerText } from '@/components/CustomerText/customerText';
import { pxToVh, pxToVw } from '@/utils/pxToVx';

interface TextListItem {
  image: number | { uri: string } | undefined;
  title: string;
}

export const TextList = () => {
  const _data: TextListItem[] = [
    {
      image: undefined,
      title: 'subscriptionSix.Track.calories',
    },
    {
      image: undefined,
      title: 'subscriptionSix.Sync.steps',
    },
    {
      image: undefined,
      title: 'subscriptionSix.Save.favorite',
    },
  ];

  const _renderItem = ({ item }: { item: TextListItem }) => {
    return (
      <>
        <View style={styles.item}>
          <FastImage style={styles.item_img} source={item.image} />
          <CustomerText style={styles.item_text}>{item.title}</CustomerText>
        </View>
      </>
    );
  };

  return (
    <>
      <View style={styles.content}>
        <FlashList<TextListItem>
          data={_data}
          renderItem={_renderItem}
          // scrollEnabled={false}
          estimatedItemSize={100}
        />
      </View>
      <FastImage
        style={styles.shadow_img}
        // source={require('@assets/images/home/price_bottom_shadow_bg.png')}
      />
    </>
  );
};

const styles = StyleSheet.create({
  content: {
    width: pxToVw(285),
    height: pxToVh(150),
    marginHorizontal: pxToVw(60),
    marginTop: pxToVh(36),
    marginRight: pxToVw(-5),
  },
  item: {
    flexDirection: 'row',
    marginBottom: pxToVh(20),
  },
  item_img: {
    width: pxToVw(18),
    height: pxToVh(18),
  },
  item_text: {
    marginLeft: pxToVw(12),
    fontWeight: '400',
    fontSize: pxToVw(15),
    color: Colors.titleColor,
  },
  shadow_img: {
    height: pxToVh(18),
    width: pxToVw(295),
    position: 'absolute',
    left: pxToVw(50),
    top: pxToVh(168),
    borderBottomLeftRadius: pxToVh(10),
    borderBottomRightRadius: pxToVh(10),
  },
});
